<template>
    <div>
        <div v-if="step==0"> <!--这里是1-->
          <div>
              <div  style="height: 40px;line-height: 40px">
                <span>节目列表</span>
              </div>
              <el-table
                border
                size="mini"
                :data="themeList"
                max-height="220"
                @selection-change="themeSelectionChange"
                style="width: 100%;">
                <el-table-column
                  type="selection"
                  header-align="center"
                  align="center"
                  width="30">
                </el-table-column>
                <el-table-column
                  prop="id"
                  header-align="center"
                  align="center"
                  label="ID">
                </el-table-column>
                <el-table-column
                  prop="programName"
                  header-align="center"
                  align="center"
                  label="节目名称">
                </el-table-column>
                <el-table-column
                  prop="canvasHeight"
                  header-align="center"
                  align="center"
                  label="分辨率">
                  <template slot-scope="scope">
                    {{scope.row.width}} * {{scope.row.height}}
                  </template>
                </el-table-column>
              </el-table>
              <div  style="height: 40px;line-height: 40px">
                <span>设备列表</span>
              </div>
              <el-table
                border
                size="mini"
                :data="deviceList"
                max-height="220"
                @selection-change="deviceSelectionChange"
                style="width: 100%;"
                row-key="id"
              >
                <el-table-column
                  type="selection"
                  header-align="center"
                  align="center"
                  width="30">
                </el-table-column>
                <el-table-column
                  prop="id"
                  header-align="center"
                  align="center"
                  label="ID"
                  width="40">
                </el-table-column>
                <el-table-column
                  prop="name"
                  header-align="center"
                  align="center"
                  label="名称">
                </el-table-column>
                <el-table-column
                  prop="mac"
                  header-align="center"
                  align="center"
                  label="MAC">
                </el-table-column>
                <el-table-column
                  prop="onlineStatus"
                  header-align="center"
                  align="center"
                  label="在线">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.onlineStatus === 0" type="info" size="mini">否</el-tag>
                    <el-tag v-if="scope.row.onlineStatus === 1" type="warning" size="mini">是</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="ram"
                  header-align="center"
                  align="center"
                  label="内存">
                </el-table-column>
                <el-table-column
                  prop="status"
                  header-align="center"
                  align="center"
                  label="发布状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" type="warning" size="mini">下线</el-tag>
                    <el-tag v-if="scope.row.status === 1" type="info" size="mini">正常</el-tag>
                  </template>
                </el-table-column>
              </el-table>

<div  style="height: 40px;line-height: 40px">
                <span>发布日程</span>
              </div>
              <div>
                <el-form ref="form" label-width="100px" size="small">
                  <el-form-item label="发布名称" :rules="{ required: true, message: '时间段不能为空', trigger: 'blur'}">
                    <el-input  size="small" disabled  v-model="publish.name"></el-input>
                  </el-form-item>
                  <el-form-item label="有效日期" disabled :rules="{ required: true, message: '时间段不能为空', trigger: 'blur'}">
                    <el-date-picker
                      readonly
                      v-model="date_value"
                      type="daterange"
                      align="right"
                      unlink-panels
                      :clearable="false"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions2">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="插播播放">
                    <el-switch disabled v-model="publish.interCut"></el-switch>
                  </el-form-item>
                  <el-form-item label="播放日程">
                    <el-radio-group disabled v-model="publish.playMode">
                      <el-radio-button label="1">全天轮播</el-radio-button>
                      <el-radio-button label="2">自定义</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <div v-if="publish.playMode == 2">
                    <el-form-item label="播放周期">
                      <el-tabs type="border-card" disabled v-model="publish.cycleMode + ''">
                        <el-tab-pane name="1">
                          <span slot="label"><i class="el-icon-date"></i>按天</span>
                          <el-checkbox-group v-model="day" disabled size="mini" >
                            <el-checkbox :checked="true" label="每天" border></el-checkbox>
                          </el-checkbox-group>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                          <span slot="label"><i class="el-icon-tickets"></i>按周</span>
                          <el-checkbox-group disabled v-model="cycleWeek" size="mini" >
                            <el-checkbox  label="1" border>周一</el-checkbox>
                            <el-checkbox  label="2" border>周二</el-checkbox>
                            <el-checkbox  label="3" border>周三</el-checkbox>
                            <el-checkbox  label="4" border>周四</el-checkbox>
                            <el-checkbox  label="5" border>周五</el-checkbox>
                            <el-checkbox  label="6" border>周六</el-checkbox>
                            <el-checkbox  label="0" border>周日</el-checkbox>
                          </el-checkbox-group>
                        </el-tab-pane>
                      </el-tabs>
                    </el-form-item>
                    <el-form-item label="时间段">
                      <el-table
                        size="mini"
                        :data="times"
                        max-height="220"
                        style="width: 100%;"
                        row-key="id"
                        border
                      >
                        <el-table-column
                          prop="id"
                          header-align="center"
                          align="center"
                          label="ID"
                          width="80">
                        </el-table-column>
                        <el-table-column
                          prop="startTime"
                          header-align="center"
                          align="center"
                          label="开始时间">
                        </el-table-column>
                        <el-table-column
                          prop="endTime"
                          header-align="center"
                          align="center"
                          label="结束时间">
                        </el-table-column>
                      </el-table>
                    </el-form-item>
                  </div>
                </el-form>

              </div>
          </div>
            <el-button @click="adoptClick" style="margin-top: 20px;"  type="primary" size="mini">通过</el-button>
            <el-button @click="rejectClick()" style="margin-top: 20px;"  type="danger" size="mini">不通过</el-button>
        </div>
        <div v-show="step==1"><!--这里是2-->
          <publish-device-theme ref="publishDeviceTheme"></publish-device-theme>
        </div>
        <el-dialog title="审核不通过" :visible.sync="checkReject">
          <el-form :model="publishViewForm">
            <el-form-item label="拒绝理由" label-width="120px">
              <el-input v-model="publishViewForm.checkRemark" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="checkReject = false">取 消</el-button>
            <el-button type="primary" @click="rejectClick">确 定</el-button>
          </div>
        </el-dialog>
      </div>
</template>
<style scoped>
  .el-card__body{
    padding-top: 10px !important;
  }
</style>
<script>
  /* eslint-disable no-extend-native */
  import PublishDeviceTheme from './publishdevicetheme'
  export default {
    name: 'publish-view-innner',
    components: {PublishDeviceTheme},
    props:{
      publishViewInnerId:{
        type: Number,
        default: 0
      },
      publishViewInnerQuickNeedsCheck:{
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        tabsStep: '1',
        checkReject: false,
        times: [],
        day: [],
        cycleWeek: [],
        step: 1,
        deviceList: [],
        deviceSelections: [],
        themeList: [],
        themeSelections: [],
        publish: {
        },
        publishViewForm: {

        },
        date_value: [new Date(), new Date()],
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    watch:{
      publishViewInnerId(v1,v2){
        this.publish.id = v1;
        this.init();
        this.$nextTick(function () {
          this.$refs.publishDeviceTheme.init(this.publish.id)
        })
      },
      publishViewInnerQuickNeedsCheck:{
        handler(v1,v2){
          console.log(v1);
          this.step = v1
        },
        deep: true,
        immediate: true
      }
    },
    mounted () {
      this.publish.id = this.publishViewInnerId;
      this.init()
      this.$nextTick(function () {
        this.$refs.publishDeviceTheme.init(this.publish.id)
      })
    },
    methods: {
      init () {
        this.getPublish()
        this.getDeviceList()
        this.getThemeList()
        this.getTimes()
      },
      getPublish () {
        this.$http({
          url: this.$http.adornUrl(`/sys/publish/info/${this.publish.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.publish = data.publish
            this.date_value = [new Date(this.publish.startTime.replace(/-/g, '/')), new Date(this.publish.endTime.replace(/-/g, '/'))]
            this.cycleWeek = this.publish.cycleWeek ? this.publish.cycleWeek.split(',') : ''
          }
        })
      },
      getDeviceList () {
        this.$http({
          url: this.$http.adornUrl(`/sys/publish/getDeviceByPublishId/${this.publish.id}`),
          method: 'post',
          data: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.deviceList = data.list
          }
        })
      },
      getThemeList () {
        this.$http({
          url: this.$http.adornUrl(`/sys/publish/getThemeByPublishId/${this.publish.id}`),
          method: 'post',
          data: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.themeList = data.list
          }
        })
      },
      getTimes () {
        this.$http({
          url: this.$http.adornUrl(`/sys/publish/times/${this.publish.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.times = data.list
          }
        })
      },
      deviceSelectionChange (val) {
        this.deviceSelections = val
      },
      themeSelectionChange (val) {
        this.themeSelections = val
      },
      addDevice (data) {
        this.deviceList = data
      },
      addTheme (data) {
        this.themeList = data
      },
      delThemes () {
        this.removeItems(this.themeList, this.themeSelections)
      },
      delDevices () {
        var ids = this.deviceSelections.map(item => {
          return item.id
        })
        this.$http({
          url: this.$http.adornUrl('/sys/publish/theme/off'),
          method: 'post',
          data: this.$http.adornData({
            dids: ids,
            pid: this.publish.id
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      indexOf (list, item) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].id === item.id) {
            return i
          }
        }
        return -1
      },
      remove (list, item) {
        let index = this.indexOf(list, item)
        if (index > -1) {
          list.splice(index, 1)
        }
      },
      removeItems (list, items) {
        for (let i = 0; i < items.length; i++) {
          this.remove(list, items[i])
        }
      },
      nextStep () {
        this.step = 2
      },
      adoptClick(){
        let that = this;
        this.$http({
          url: this.$http.adornUrl(`/sys/publish/update`),
          method: 'post',
          data: {
            checkStatus: 1,
            id: this.publishViewInnerId
          }
        }).then(({data}) => {
          if (data && data.code === 0) {
            that.checkReject = false;
            that.step = 1
            that.$parent.step = 4;
          }
        })
      },
      rejectClick(state){
        let that = this;
        if( state ){
          this.$http({
            url: this.$http.adornUrl(`/sys/publish/update`),
            method: 'post',
            data: {
              checkStatus: 2,
              id: this.publishViewInnerId,
              checkRemark: that.publishViewForm.checkRemark
            }
          }).then(({data}) => {
            if (data && data.code === 0) {
              that.checkReject = false;
              that.$router.push({path:'/sys-publish'});
            }
          })
        } else {
          this.checkReject = true;
        }
      }
    }
  }
  Date.prototype.pattern = function (fmt) {
    var o = {
      'M+': this.getMonth() + 1, // 月份
      'd+': this.getDate(), // 日
      'h+': this.getHours() % 12 === 0 ? 12 : this.getHours() % 12, // 小时
      'H+': this.getHours(), // 小时
      'm+': this.getMinutes(), // 分
      's+': this.getSeconds(), // 秒
      'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
      'S': this.getMilliseconds() // 毫秒
    }
    var week = {
      '0': '/u65e5',
      '1': '/u4e00',
      '2': '/u4e8c',
      '3': '/u4e09',
      '4': '/u56db',
      '5': '/u4e94',
      '6': '/u516d'
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '/u661f/u671f' : '/u5468') : '') + week[this.getDay() + ''])
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
  }
</script>

<style scoped>

</style>
